<template>
  <div v-loading="loading" element-loading-text="拼命加载中">
    <!--按钮-->
    <el-row>
      <el-col>
        <div class="button-wrapper">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/affair/task/review' }" >返回上一页</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="button-wrapper">
          <!--<el-button size="mini" type="primary" round @click="openChildDutyList">增加子任务</el-button>-->
          <el-button size="mini" type="warning" round  @click="openComplete">处理完成并上报</el-button>
        </div>
      </el-col>
    </el-row>
    <br/>
    <br/>
    <!--表格-->
  <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
   <!--任务详情-->
    <el-tab-pane label="任务详情" name="first">
      <div class="data-wrapper">
        <template v-if="tableData!=null">
          <el-form :label-position="labelPosition" label-width="100px" :model="tableData">
            <el-row :gutter="5">
              <el-col :span="12">
                <el-form-item label="任务编码"  style="width:300px">
                  <el-input v-bind:readonly="readonly" v-model="tableData.dutyCode" placeholder="请选择" >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="任务名称"  style="width:300px">
                  <el-input  v-bind:readonly="readonly" v-model="tableData.dutyName" placeholder="请选择"  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="12">
                <el-form-item label="任务类别"  style="width:300px">
                  <!--<el-input v-model="form.riverLevel" auto-complete="off"></el-input>-->
                  <el-input   v-bind:readonly="readonly" v-model="tableData.dutyType" auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="完成时间"  style="width:300px">
                  <el-input   v-bind:readonly=true v-model="tableData.completeTime" auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="12">
                <el-form-item label="创建人"  style="width:300px">
                  <el-input v-bind:readonly="readonly"  v-model="tableData.createUser" auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建时间"  style="width:300px">
                  <el-input v-bind:readonly="readonly"   v-model="tableData.createTime" auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="12">
                <el-form-item  label="受理时间"  style="width:300px">
                  <el-input  v-bind:readonly="readonly"  v-model="tableData.acceptTime" auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="转派时间"  style="width:300px">
                  <el-input v-bind:readonly="readonly"   v-model="tableData.transferTime" auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="处理状态"  style="width:300px">
                  <el-input v-bind:readonly=true  v-model="tableData.handleState" auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="处理结果"  style="width:300px">
                  <el-input  v-bind:readonly=true v-model="tableData.handleResult" auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="5">
              <el-col :span="22">
                <el-form-item label="任务内容"  style="width:300px">
                  <el-input  type="textarea" v-bind:readonly="readonly" v-model="tableData.dutyNote" >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </div>
    </el-tab-pane>
    <!--子任务列表-->
    <el-tab-pane label="子任务列表" name="second">
        <!--增加按钮-->
        <div class="button-wrapper">
          <el-button size="mini" type="primary" round @click="openAddDuty">增加子任务</el-button>
        </div>
      <br/>
        <div class="data-wrapper">
          <template v-if="childList!=null">
            <el-table ref="multipleTable" :data="childList"  tooltip-effect="light" style="width: 100%">
              <!--@selection-change="handleSelectionChange"-->
              <!--<el-table-column type="selection" label="全选" width="50">-->
              <!--</el-table-column>-->
              <el-table-column type="index" label="序号" :index="indexMethod" width="50">
              </el-table-column>
              <el-table-column prop="dutyCode" label="任务编号" :readonly=true sortable :show-overflow-tooltip="true" width="100">
              </el-table-column>
              <el-table-column prop="dutyName"  label="任务名称"  :readonly=true :show-overflow-tooltip="true" width="100">
              </el-table-column>
              <el-table-column prop="dutyType" label="任务类型"  :readonly=true :show-overflow-tooltip="true" width="100">
              </el-table-column>
              <el-table-column prop="dutyNote" label="任务内容"   :readonly=true :show-overflow-tooltip="true" width="100">
              </el-table-column>
              <el-table-column prop="eName" label="所属事件名称"  :readonly=true :show-overflow-tooltip="true" width="110">
              </el-table-column>
              <el-table-column prop="eCode" label="所属事件编码"  :readonly=true :show-overflow-tooltip="true" width="110">
              </el-table-column>
              <el-table-column prop="createUser" label="任务发布人"  :readonly=true :show-overflow-tooltip="true" width="110">
              </el-table-column>
              <el-table-column prop="createTime" label="任务发布时间"  :readonly=true :show-overflow-tooltip="true" sortable width="130">
              </el-table-column>
              <el-table-column prop="liableUser" label="任务负责人"  :readonly=true :show-overflow-tooltip="true" width="120">
              </el-table-column>
              <el-table-column prop="handleState" label="任务状态"  :readonly=true :show-overflow-tooltip="true" :formatter="formatState">
              </el-table-column>
              <el-table-column fixed="right" label="操作" align="center" width="120">
                <template slot-scope="scope">
                  <el-button title="删除" size="small" icon="el-icon-delete" type="primary" circle @click="handleDelDuty(scope.$index, scope.row)"></el-button>
                  <el-button title="编辑" size="small" icon="el-icon-edit" type="success" circle @click="openEditDuty(scope.$index, scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>

            <!--底部区域-->
            <el-row :gutter="20" type="flex" justify="space-between" align="center" class="page-wrapper">
              <!-- 分页 -->
              <el-col :span="20">
                <div class="page-item">
                  <el-pagination background
                                 @size-change="handleSizeChange"
                                 @current-change="handleCurrentChange"
                                 :current-page.sync="listQuery.currentPage"
                                 :page-sizes="pageSizes"
                                 :page-size="listQuery.pageSize"
                                 layout="total, sizes, prev, pager, next, jumper"
                                 :total="dataCount"/>
                </div>
              </el-col>
            </el-row>
          </template>
        </div>
    </el-tab-pane>
  </el-tabs>
    <!--弹窗-->

    <!--//上报任务-->
    <el-dialog title=" " :visible.sync="dialogCompleteVisible" >
      <el-form :model="form" >
        <el-row :gutter="5">
          <el-col :span="22">
            <el-form-item label="任务内容" :label-width="formLabelWidth">
              <el-input  type="textarea" v-bind:readonly="readonly" v-model="tableData.dutyNote" >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogCompleteVisible = false">取 消</el-button>
        <el-button v-if="!readonly" size="medium" type="primary" @click="doComplete">确 定</el-button>
      </div>
    </el-dialog>

      <!--//编辑子任务-->
      <el-dialog title=" " :visible.sync="dialogEditVisible" v-if="form!=null">
          <el-form :model="form" >
              <el-row :gutter="5">
                  <el-col :span="12">
                      <el-form-item label="任务编码" :label-width="formLabelWidth">
                          <el-input v-bind:readonly="readonly" v-model="form.dutyCode" placeholder="请选择">
                          </el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="任务名称" :label-width="formLabelWidth">
                          <el-input  v-bind:readonly="readonly" v-model="form.dutyName" placeholder="请选择">
                          </el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="12">
                      <el-form-item label="任务类别" :label-width="formLabelWidth">
                          <!--<el-input v-model="form.riverLevel" auto-complete="off"></el-input>-->
                          <el-input   v-bind:readonly="readonly" v-model="form.dutyType" auto-complete="off"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="完成时间" :label-width="formLabelWidth">
                          <el-input   v-bind:readonly=true v-model="form.completeTime" auto-complete="off"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="12">
                      <el-form-item label="创建人" :label-width="formLabelWidth">
                          <el-input v-bind:readonly="readonly"  v-model="form.createUser" auto-complete="off"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="创建时间" :label-width="formLabelWidth">
                          <el-input v-bind:readonly="readonly"   v-model="form.createTime" auto-complete="off"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="12">
                      <el-form-item  label="受理时间" :label-width="formLabelWidth">
                          <el-input  v-bind:readonly="readonly"  v-model="form.acceptTime" auto-complete="off"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="转派时间" :label-width="formLabelWidth">
                          <el-input v-bind:readonly="readonly"   v-model="form.transferTime" auto-complete="off"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
                  <el-col :span="12">
                      <el-form-item label="处理状态" :label-width="formLabelWidth">
                          <el-input v-bind:readonly=true  v-model="form.handleState" auto-complete="off"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="处理结果" :label-width="formLabelWidth">
                          <el-input  v-bind:readonly=true v-model="form.handleResult" auto-complete="off"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
                  <el-col :span="12">
                      <el-form-item label="责任人" :label-width="formLabelWidth" >
                          <el-input  v-bind:readonly=true v-model="form.liableUser" auto-complete="off"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="完成时间" :label-width="formLabelWidth" >
                          <el-input   v-bind:readonly=true v-model="form.completeTime" auto-complete="off"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="22">
                      <el-form-item label="任务内容" :label-width="formLabelWidth">
                          <el-input  type="textarea" v-bind:readonly="readonly" v-model="form.dutyNote" >
                          </el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button size="medium" @click="dialogEditVisible = false">取 消</el-button>
              <el-button v-if="!readonly" size="medium" type="primary" @click="submitEditDuty">确 定</el-button>
          </div>
      </el-dialog>

      <!--添加子任务-->
      <el-dialog title=" " :visible.sync="dialogAddVisible">
          <el-form :model="form" >
              <el-row>
                  <el-col :span="12">
                      <el-form-item label="父级任务" :label-width="formLabelWidth" >
                          <el-input   v-bind:readonly=true v-model="tableData.dutyName" auto-complete="off"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="所属事件" :label-width="formLabelWidth" >
                          <el-input   v-bind:readonly=true v-model="tableData.eName" auto-complete="off"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="12">
                      <el-form-item label="任务编码" :label-width="formLabelWidth">
                          <el-input v-bind:readonly="readonly" v-model="form.dutyCode" placeholder="请选择">
                          </el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="任务名称" :label-width="formLabelWidth">
                          <el-input  v-bind:readonly="readonly" v-model="form.dutyName" placeholder="请选择">
                          </el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="12">
                      <el-form-item label="任务类别" :label-width="formLabelWidth">
                          <!--<el-input v-model="form.riverLevel" auto-complete="off"></el-input>-->
                          <el-input   v-bind:readonly="readonly" v-model="form.dutyType" auto-complete="off"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                      <el-form-item label="责任人" :label-width="formLabelWidth" >
                          <el-input  v-bind:readonly="readonly" v-model="form.liableUser" auto-complete="off"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="22">
                      <el-form-item label="任务内容" :label-width="formLabelWidth">
                          <el-input  type="textarea" v-bind:readonly="readonly" v-model="form.dutyNote" >
                          </el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button size="medium" @click="dialogAddVisible = false">取 消</el-button>
              <el-button v-if="!readonly" size="medium" type="primary" @click="submitAddDuty">确 定</el-button>
          </div>
      </el-dialog>

  </div>
</template>
<script>

export default {
        data() {
            return {
                //编辑，新增窗口数据
                form:{},
                //弹层宽度
                formLabelWidth: "100px",
                tableData:{},
                // 子任务表格
                childList:null,
                // 指定默认显示标签
                activeName2: 'first',
                //表格对其
                labelPosition: 'right',
                //是否只读
                readonly:true,
                //搜索。axios发送的参数
                listQuery: {
                    currentPage: 1,
                    pageSize: 10
                },
                //页面加载
                loading: false,
                //子任务列表弹层显示开关
                dialogDutysVisible:false,
                //编辑子任务弹层显示开关
                dialogEditVisible:false,
                //新增子任务弹层显示开关
                dialogAddVisible:false,
                //完成任务上报弹层开关
                dialogCompleteVisible:false,
            };
        },
        mounted() {
            // 初始化页面
            // 获取任务详情
            this.postList();

        },
        methods: {
            //打开添加子任务弹窗
            openAddDuty(){
                this.readonly = false;
                this.form ={};
                this.dialogAddVisible = true;
                console.log(this.tableData)
            },
            submitAddDuty(){
              var addform=this.form;
             //设置父级任务id和事件id
              addform.parentId=this.tableData.dutyId;
              addform.eId=this.tableData.eId;
                this.$confirm("确认提交？").then(_ => {
                this.postRequest("/api/rcs/addDuty", addform)
                    .then(res => {
                    var data = res.data;
                if (data.status == 200) {
                    this.$message.success(data.msg);
                    this.form={};
                    this.getChildDutyList();
                    this.dialogAddVisible = false;
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(error => {
                    //错误信息
                    this.$message.error(error);
            });
            });
            },

            //打开编辑子任务弹窗
            openEditDuty(index,row){
                this.readonly = false;
                this.form =row;
                this.dialogEditVisible = true;
            },
            //提交编辑form
            submitEditDuty(){
                this.$confirm("确认提交？").then(_ => {
                    console.log(this.form)
                    this.postRequest("/api/rcs/editDuty", this.form)
                    .then(res => {
                    var data = res.data;
                if (data.status == 200) {
                    this.$message.success(data.msg);
                    this.form={};
                    this.dialogEditVisible = false;
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(error => {
                    //错误信息
                    this.$message.error(error);
            });
            });
            },
            //删除一个子任务
            handleDelDuty(index,row){
                this.$confirm("确认删除？").then(_ => {
                    this.postRequest("/api/rcs/delDuty", row.dutyId)
                    .then(res => {
                    var data = res.data;
                if (data.status == 200) {
                    this.$message.success(data.msg);
                    this.postList();
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(error => {
                    //错误信息
                    this.$message.error(error);
            });
            });
            },
            // 状态翻译
            formatState: function(row, column) {
                if(row.handleState==-1){
                    return '待受理';
                }else if(row.handleState==8){
                    return '等待拒绝确认'
                }else if(row.handleState==9){
                    return  '处理中'
                }else if(row.handleState==5){
                    return  '任务结果待审核'
                }else if(row.handleState==0){
                    return  '任务已完成/关闭'
                }else{
                    return  '其他'
                }
            },
            //上报任务
            doComplete(){

            },
            //打开新增子任务弹层
            openAdd(){
                this.readonly = false;
                this.form = {};
                this.dialogAddVisible = true;
            },
            //上报完成
            openComplete(){
                this.readonly = false;
                this.form = {};
                this.dialogCompleteVisible = true;

            },
            //点击tab
            handleClick(tab, event) {
                console.log(tab, event);
                //获取子任务列表
                this.getChildDutyList();

            },
            //初始化
            postList() {
                this.loading = true;
                this.postRequest("/api/rcs/toReviewTab",this.listQuery)
                    .then(res => {
                    var data = res.data;
                if (data.status == 200) {
                    this.tableData = data.data;
                } else {
                    alert(data.msg);
                }
                this.loading = false;
            })
            .catch(error => {
                    //错误信息
                    console.log(error);
            });
            },

            //打开新增，子任务列表
            getChildDutyList(){
                this.readonly = false;

                this.loading = true;
                var listQuery={
                    currentPage: 1,
                    pageSize: 500,
                    parentId: this.tableData.dutyId
                };
                this.postRequest("/api/rcs/dutys",listQuery)
                    .then(res => {
                    var data = res.data;
                if (data.status == 200) {
                    this.childList = data.data;
                    console.log('获得的row'+ this.childList);
                    this.dataCount = data.count;
                } else {
                    alert(data.msg);
                }
                this.loading = false;
            })
            .catch(error => {
                    //错误信息
                    console.log(error);
            });
            },
            //分页序号
            indexMethod(index) {
                return (
                    index + 1 + (this.listQuery.currentPage - 1) * this.listQuery.pageSize
                );
            },

            //每页个数改变
            handleSizeChange(size) {
                this.listQuery.pageSize = size;
                this.listQuery.currentPage = 1;
                this.postList();
            },
            //当前页改变
            handleCurrentChange(currentPage) {
                this.listQuery.currentPage = currentPage;
                this.postList();
            }
        }
    }
</script>
